import React from "react";
import "./style.css";
class App1 extends React.Component {
  state = {
    list: [
      ["胡聪", "浮窗路", "王文志", "王尧"],
      [null, "刘云浩", "试驾了", "亡运动"],
    ],
    x: -1,
    y: -1,
    bg: '#ffffff'
  };
  random(min, max) {
    return Math.floor(Math.random() * (max - min + 1) + min);
  }
  getRandomPos(maxX, maxY) {
    let x, y;
    const { list } = this.state
    while(true) {
      x = this.random(0, maxX)
      y = this.random(0, maxY)
      if(list[x][y]) {
        break;
      }
    }
    this.setState({
      x, y, bg: '#' + Math.random().toString(16).slice(2, 8)
    })
    return { x, y }
  }
  start() {
    const timer = setInterval(() => {
      this.getRandomPos(1, 3)
    }, 100);

    setTimeout(() => {
      clearInterval(timer)
    }, 3000)
  }
  render() {
    const { list, x, y, bg } = this.state;
    console.log(document.querySelector('.content'))
    return (
      <div className="content">
        <ul className="row">
          {list.map((row, i) => {
            return (
              <li key={i}>
                <ul className="column">
                  {row.map((column, j) => {
                    return <li key={j} style={{
                      backgroundColor:  (x === i && y === j) ? bg : 'white'
                    }}>{column}</li>;
                  })}
                </ul>
              </li>
            );
          })}
        </ul>

        <button onClick={() => this.start()}>随意一个</button>
      </div>
    );
  }
}

export default App1;


